$footer-breakpoint-tablet: 62.5em;
$footer-breakpoint-mobile: 40em;

.root {
  --docs-footer-height: 400px;

  @mixin smaller-than $footer-breakpoint-tablet {
    --docs-footer-height: 520px;
  }

  @mixin smaller-than $footer-breakpoint-mobile {
    --docs-footer-height: 380px;
  }
}

.spacer {
  height: var(--docs-footer-height);
}

.wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--docs-footer-height);
  background-color: var(--mantine-color-body);

  &[data-with-navbar] {
    padding-inline-start: calc(
      var(--docs-navbar-width) + var(--mantine-spacing-md) * 2 + var(--docs-inline-spacing)
    );
    padding-inline-end: calc(var(--mantine-spacing-md) * 2);

    @mixin smaller-than 1520px {
      padding-inline-start: calc(var(--docs-navbar-width) + var(--docs-inline-spacing));
    }

    @mixin smaller-than $docs-mdx-breakpoint {
      padding-inline-start: var(--docs-inline-spacing);
      padding-inline-end: var(--docs-inline-spacing);
    }
  }
}

.inner {
  padding-top: calc(var(--mantine-spacing-xl) * 2);
  padding-bottom: calc(var(--mantine-spacing-xl) * 2);
  display: flex;
  justify-content: space-between;

  @mixin smaller-than $footer-breakpoint-tablet {
    flex-direction: column;
  }

  @mixin smaller-than $footer-breakpoint-mobile {
    padding-bottom: var(--mantine-spacing-md);
  }
}

.logoSection {
  max-width: 300px;

  @mixin smaller-than $footer-breakpoint-tablet {
    margin-bottom: var(--mantine-spacing-xl);
  }

  @mixin smaller-than $footer-breakpoint-mobile {
    margin-bottom: 0;
  }
}

.description {
  margin-top: var(--mantine-spacing-xs);
  color: var(--mantine-color-dimmed);
}

.afterFooter {
  border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
  padding-top: var(--mantine-spacing-md);
}

.afterFooterNote {
  &,
  & a {
    color: var(--mantine-color-bright);
  }
}

.groups {
  display: flex;

  @mixin smaller-than $footer-breakpoint-mobile {
    display: none;
  }
}

.social {
  display: flex;

  @mixin smaller-than $footer-breakpoint-mobile {
    display: block;
  }
}

.socialButton {
  &:last-of-type {
    margin-inline-start: var(--mantine-spacing-md);
  }

  @mixin smaller-than $footer-breakpoint-mobile {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: var(--mantine-spacing-sm);
  }
}
